<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { Search, Plus, Edit, Delete, Download, Refresh, View, Document, Printer } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 处方数据
const prescriptionData = ref([
  {
    id: 'RX-20230001',
    patientName: '张三',
    patientId: 'P-100234',
    doctorName: '李医生',
    department: '内科',
    diagnosis: '高血压',
    status: '已发放',
    createTime: '2023-06-25',
    validPeriod: '7天',
    drugCount: 3
  },
  {
    id: 'RX-20230002',
    patientName: '李四',
    patientId: 'P-100453',
    doctorName: '王医生',
    department: '骨科',
    diagnosis: '腰椎间盘突出',
    status: '已发放',
    createTime: '2023-06-28',
    validPeriod: '14天',
    drugCount: 4
  },
  {
    id: 'RX-20230003',
    patientName: '王五',
    patientId: 'P-100675',
    doctorName: '赵医生',
    department: '内分泌科',
    diagnosis: '2型糖尿病',
    status: '已发放',
    createTime: '2023-07-01',
    validPeriod: '30天',
    drugCount: 5
  },
  {
    id: 'RX-20230004',
    patientName: '陈六',
    patientId: 'P-100892',
    doctorName: '李医生',
    department: '内科',
    diagnosis: '感冒',
    status: '已发放',
    createTime: '2023-07-05',
    validPeriod: '3天',
    drugCount: 3
  },
  {
    id: 'RX-20230005',
    patientName: '赵七',
    patientId: 'P-101024',
    doctorName: '刘医生',
    department: '妇产科',
    diagnosis: '妊娠反应',
    status: '已发放',
    createTime: '2023-07-08',
    validPeriod: '14天',
    drugCount: 2
  },
  {
    id: 'RX-20230006',
    patientName: '钱八',
    patientId: 'P-101235',
    doctorName: '张医生',
    department: '心内科',
    diagnosis: '心律不齐',
    status: '草稿',
    createTime: '2023-07-10',
    validPeriod: '未定',
    drugCount: 0
  },
  {
    id: 'RX-20230007',
    patientName: '孙九',
    patientId: 'P-101468',
    doctorName: '陈医生',
    department: '儿科',
    diagnosis: '小儿咳嗽',
    status: '已发放',
    createTime: '2023-07-12',
    validPeriod: '7天',
    drugCount: 3
  },
  {
    id: 'RX-20230008',
    patientName: '周十',
    patientId: 'P-101573',
    doctorName: '吴医生',
    department: '眼科',
    diagnosis: '结膜炎',
    status: '已发放',
    createTime: '2023-07-14',
    validPeriod: '5天',
    drugCount: 2
  }
]);

// 药品数据，在实际项目中可能从后端获取
const drugList = ref([
  {
    id: 'D001',
    name: '硝苯地平缓释片',
    spec: '10mg*30片',
    unit: '盒',
    usage: '口服',
    frequency: '每日3次',
    dosage: '10mg/次',
    category: '心血管类'
  },
  {
    id: 'D002',
    name: '阿司匹林肠溶片',
    spec: '100mg*30片',
    unit: '盒',
    usage: '口服',
    frequency: '每日1次',
    dosage: '100mg/次',
    category: '心血管类'
  },
  {
    id: 'D003',
    name: '二甲双胍片',
    spec: '500mg*60片',
    unit: '盒',
    usage: '口服',
    frequency: '每日3次',
    dosage: '500mg/次',
    category: '内分泌类'
  },
  {
    id: 'D004',
    name: '布洛芬片',
    spec: '0.2g*24片',
    unit: '盒',
    usage: '口服',
    frequency: '每4-6小时1次',
    dosage: '0.2-0.4g/次',
    category: '解热镇痛类'
  },
  {
    id: 'D005',
    name: '头孢拉定胶囊',
    spec: '0.25g*24粒',
    unit: '盒',
    usage: '口服',
    frequency: '每日3次',
    dosage: '0.25-0.5g/次',
    category: '抗生素类'
  },
  {
    id: 'D006',
    name: '氨溴索口服溶液',
    spec: '100ml:0.6g',
    unit: '瓶',
    usage: '口服',
    frequency: '每日3次',
    dosage: '10ml/次',
    category: '呼吸系统类'
  },
  {
    id: 'D007',
    name: '盐酸左氧氟沙星片',
    spec: '0.1g*10片',
    unit: '盒',
    usage: '口服',
    frequency: '每日2次',
    dosage: '0.1-0.2g/次',
    category: '抗生素类'
  },
  {
    id: 'D008',
    name: '地塞米松滴眼液',
    spec: '5ml:5mg',
    unit: '瓶',
    usage: '滴眼',
    frequency: '每日4-6次',
    dosage: '1-2滴/次',
    category: '眼科用药'
  }
]);

// 搜索条件和过滤
const searchForm = reactive({
  keyword: '',
  department: '',
  status: '',
  dateRange: []
});

// 部门选项
const departmentOptions = [
  { value: '', label: '全部科室' },
  { value: '内科', label: '内科' },
  { value: '骨科', label: '骨科' },
  { value: '内分泌科', label: '内分泌科' },
  { value: '妇产科', label: '妇产科' },
  { value: '心内科', label: '心内科' },
  { value: '儿科', label: '儿科' },
  { value: '眼科', label: '眼科' }
];

// 状态选项
const statusOptions = [
  { value: '', label: '全部状态' },
  { value: '已发放', label: '已发放' },
  { value: '草稿', label: '草稿' }
];

// 搜索方法
const searchPrescriptions = () => {
  // 实际应用中应该调用API进行搜索
  console.log('搜索条件:', searchForm);
};

// 重置搜索
const resetSearch = () => {
  searchForm.keyword = '';
  searchForm.department = '';
  searchForm.status = '';
  searchForm.dateRange = [];
  searchPrescriptions();
};

// 表格分页设置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: prescriptionData.value.length
});

// 处理分页变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val;
};

const handleSizeChange = (val) => {
  pagination.pageSize = val;
  pagination.currentPage = 1;
};

// 过滤后的数据
const filteredPrescriptions = computed(() => {
  let result = [...prescriptionData.value];
  
  // 关键词搜索
  if (searchForm.keyword) {
    const keyword = searchForm.keyword.toLowerCase();
    result = result.filter(item => 
      item.patientName.toLowerCase().includes(keyword) || 
      item.id.toLowerCase().includes(keyword) ||
      item.patientId.toLowerCase().includes(keyword) ||
      item.diagnosis.toLowerCase().includes(keyword)
    );
  }
  
  // 科室过滤
  if (searchForm.department) {
    result = result.filter(item => item.department === searchForm.department);
  }
  
  // 状态过滤
  if (searchForm.status) {
    result = result.filter(item => item.status === searchForm.status);
  }
  
  // 日期范围过滤
  if (searchForm.dateRange && searchForm.dateRange.length === 2) {
    const startDate = new Date(searchForm.dateRange[0]);
    const endDate = new Date(searchForm.dateRange[1]);
    
    result = result.filter(item => {
      const createDate = new Date(item.createTime);
      return createDate >= startDate && createDate <= endDate;
    });
  }
  
  // 更新总数
  pagination.total = result.length;
  
  return result;
});

// 处理查看
const handleView = (row) => {
  console.log('查看处方:', row);
  prescriptionDialogTitle.value = '查看处方';
  viewMode.value = true;
  selectedPrescription.value = { ...row };
  
  // 在实际应用中，这里应该调用API获取处方详情
  // 模拟获取药品明细数据
  selectedPrescriptionDrugs.value = [
    {
      id: 'D001',
      name: '硝苯地平缓释片',
      spec: '10mg*30片',
      unit: '盒',
      usage: '口服',
      frequency: '每日3次',
      dosage: '10mg/次',
      quantity: 1,
      days: 7
    },
    {
      id: 'D004',
      name: '布洛芬片',
      spec: '0.2g*24片',
      unit: '盒',
      usage: '口服',
      frequency: '发热时',
      dosage: '0.4g/次',
      quantity: 1,
      days: 3
    },
    {
      id: 'D006',
      name: '氨溴索口服溶液',
      spec: '100ml:0.6g',
      unit: '瓶',
      usage: '口服',
      frequency: '每日3次',
      dosage: '10ml/次',
      quantity: 1,
      days: 7
    }
  ];
  
  prescriptionDialog.value = true;
};

// 处理编辑
const handleEdit = (row) => {
  console.log('编辑处方:', row);
  prescriptionDialogTitle.value = '编辑处方';
  viewMode.value = false;
  selectedPrescription.value = { ...row };
  
  // 在实际应用中，这里应该调用API获取处方详情
  // 模拟获取药品明细数据
  selectedPrescriptionDrugs.value = [
    {
      id: 'D001',
      name: '硝苯地平缓释片',
      spec: '10mg*30片',
      unit: '盒',
      usage: '口服',
      frequency: '每日3次',
      dosage: '10mg/次',
      quantity: 1,
      days: 7
    },
    {
      id: 'D004',
      name: '布洛芬片',
      spec: '0.2g*24片',
      unit: '盒',
      usage: '口服',
      frequency: '发热时',
      dosage: '0.4g/次',
      quantity: 1,
      days: 3
    },
    {
      id: 'D006',
      name: '氨溴索口服溶液',
      spec: '100ml:0.6g',
      unit: '瓶',
      usage: '口服',
      frequency: '每日3次',
      dosage: '10ml/次',
      quantity: 1,
      days: 7
    }
  ];
  
  prescriptionDialog.value = true;
};

// 处理删除
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除处方"${row.id}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 实际应用中应该调用API删除数据
    prescriptionData.value = prescriptionData.value.filter(item => item.id !== row.id);
    ElMessage({
      type: 'success',
      message: '删除成功'
    });
  }).catch(() => {});
};

// 处理打印
const handlePrint = (row) => {
  ElMessage({
    type: 'info',
    message: `正在打印处方: ${row.id}`
  });
};

// 新建处方对话框
const prescriptionDialog = ref(false);
const prescriptionDialogTitle = ref('新建处方');
const viewMode = ref(false);

// 选中的处方
const selectedPrescription = ref({
  patientName: '',
  patientId: '',
  doctorName: '',
  department: '',
  diagnosis: '',
  notes: '',
  status: '草稿'
});

// 处方药品
const selectedPrescriptionDrugs = ref([]);

// 药品选择对话框
const drugSelectDialog = ref(false);
const drugSearchKeyword = ref('');

// 过滤后的药品列表
const filteredDrugs = computed(() => {
  if (!drugSearchKeyword.value) return drugList.value;
  
  const keyword = drugSearchKeyword.value.toLowerCase();
  return drugList.value.filter(item => 
    item.name.toLowerCase().includes(keyword) || 
    item.id.toLowerCase().includes(keyword) ||
    item.category.toLowerCase().includes(keyword)
  );
});

// 选择药品
const handleSelectDrug = (drug) => {
  // 检查是否已经添加过
  const exists = selectedPrescriptionDrugs.value.some(item => item.id === drug.id);
  if (exists) {
    ElMessage.warning(`药品"${drug.name}"已添加到处方中`);
    return;
  }
  
  // 添加到处方中
  selectedPrescriptionDrugs.value.push({
    ...drug,
    quantity: 1,
    days: 7
  });
  
  // 关闭对话框
  drugSelectDialog.value = false;
  drugSearchKeyword.value = '';
};

// 移除药品
const removeDrug = (index) => {
  selectedPrescriptionDrugs.value.splice(index, 1);
};

// 处理新建
const handleAdd = () => {
  prescriptionDialogTitle.value = '新建处方';
  viewMode.value = false;
  
  // 重置表单
  selectedPrescription.value = {
    patientName: '',
    patientId: '',
    doctorName: '',
    department: '',
    diagnosis: '',
    notes: '',
    status: '草稿'
  };
  
  selectedPrescriptionDrugs.value = [];
  prescriptionDialog.value = true;
};

// 提交处方
const submitPrescription = () => {
  // 表单验证
  if (!selectedPrescription.value.patientName || !selectedPrescription.value.doctorName || !selectedPrescription.value.department) {
    ElMessage.warning('请填写必填项');
    return;
  }
  
  if (selectedPrescriptionDrugs.value.length === 0) {
    ElMessage.warning('请至少添加一种药品');
    return;
  }
  
  // 创建新记录或更新记录
  const isNew = !selectedPrescription.value.id;
  const prescription = {
    id: isNew ? `RX-${new Date().getFullYear()}${String(prescriptionData.value.length + 1).padStart(4, '0')}` : selectedPrescription.value.id,
    patientName: selectedPrescription.value.patientName,
    patientId: selectedPrescription.value.patientId,
    doctorName: selectedPrescription.value.doctorName,
    department: selectedPrescription.value.department,
    diagnosis: selectedPrescription.value.diagnosis,
    status: selectedPrescription.value.status,
    createTime: isNew ? new Date().toISOString().split('T')[0] : selectedPrescription.value.createTime,
    validPeriod: selectedPrescription.value.status === '已发放' ? '7天' : '未定',
    drugCount: selectedPrescriptionDrugs.value.length
  };
  
  if (isNew) {
    // 添加到列表
    prescriptionData.value.unshift(prescription);
  } else {
    // 更新列表
    const index = prescriptionData.value.findIndex(item => item.id === prescription.id);
    if (index !== -1) {
      prescriptionData.value[index] = prescription;
    }
  }
  
  // 关闭对话框
  prescriptionDialog.value = false;
  
  ElMessage({
    type: 'success',
    message: isNew ? '创建成功' : '更新成功'
  });
};

// 导出数据
const exportData = () => {
  ElMessage({
    type: 'info',
    message: '正在导出数据，请稍后...'
  });
  // 实际应用中应该调用API导出数据
};

// 刷新数据
const refreshData = () => {
  ElMessage({
    type: 'info',
    message: '正在刷新数据...'
  });
  // 实际应用中应该调用API刷新数据
};
</script>

<template>
  <div class="prescriptions-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :model="searchForm" label-width="80px" class="search-form">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item label="关键词">
              <el-input 
                v-model="searchForm.keyword" 
                placeholder="搜索处方ID/患者/诊断" 
                clearable
                @keyup.enter="searchPrescriptions"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item label="科室">
              <el-select v-model="searchForm.department" placeholder="请选择科室" clearable style="width: 100%">
                <el-option 
                  v-for="item in departmentOptions" 
                  :key="item.value" 
                  :label="item.label" 
                  :value="item.value" 
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item label="状态">
              <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 100%">
                <el-option 
                  v-for="item in statusOptions" 
                  :key="item.value" 
                  :label="item.label" 
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item label="日期">
              <el-date-picker
                v-model="searchForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="search-buttons">
          <el-button type="primary" @click="searchPrescriptions" :icon="Search">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 表格工具栏 -->
    <div class="table-toolbar">
      <div class="left">
        <el-button type="primary" @click="handleAdd" :icon="Plus">新建处方</el-button>
      </div>
      <div class="right">
        <el-button @click="exportData" :icon="Download">导出</el-button>
        <el-button @click="refreshData" :icon="Refresh">刷新</el-button>
      </div>
    </div>
    
    <!-- 处方表格 -->
    <el-table :data="filteredPrescriptions" style="width: 100%" border stripe>
      <el-table-column prop="id" label="处方号" min-width="120" />
      <el-table-column prop="patientName" label="患者姓名" min-width="100" />
      <el-table-column prop="patientId" label="患者ID" min-width="100" />
      <el-table-column prop="diagnosis" label="诊断" min-width="120" />
      <el-table-column prop="department" label="科室" min-width="100" />
      <el-table-column prop="doctorName" label="医生" min-width="100" />
      <el-table-column prop="drugCount" label="药品数量" min-width="80" align="center" />
      <el-table-column prop="createTime" label="开具日期" min-width="100" />
      <el-table-column prop="validPeriod" label="有效期" min-width="80" />
      <el-table-column prop="status" label="状态" min-width="80">
        <template #default="scope">
          <el-tag 
            :type="scope.row.status === '已发放' ? 'success' : 'warning'"
          >
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="180">
        <template #default="scope">
          <el-button size="small" @click="handleView(scope.row)" :icon="Document">查看</el-button>
          <el-button v-if="scope.row.status === '草稿'" size="small" type="primary" @click="handleEdit(scope.row)" :icon="Edit">编辑</el-button>
          <el-button v-if="scope.row.status === '已发放'" size="small" type="success" @click="handlePrint(scope.row)" :icon="Printer">打印</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)" :icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
    
    <!-- 处方详情对话框 -->
    <el-dialog
      v-model="prescriptionDialog"
      :title="prescriptionDialogTitle"
      width="70%"
      :close-on-click-modal="false"
    >
      <div class="prescription-form">
        <h3 class="form-section-title">基本信息</h3>
        <el-form :model="selectedPrescription" label-width="100px" :disabled="viewMode">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="患者姓名" required>
                <el-input v-model="selectedPrescription.patientName" placeholder="请输入患者姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="患者ID" required>
                <el-input v-model="selectedPrescription.patientId" placeholder="请输入患者ID" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="医生姓名" required>
                <el-input v-model="selectedPrescription.doctorName" placeholder="请输入医生姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="科室" required>
                <el-select v-model="selectedPrescription.department" placeholder="请选择科室" style="width: 100%">
                  <el-option 
                    v-for="item in departmentOptions.filter(item => item.value)" 
                    :key="item.value" 
                    :label="item.label" 
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="诊断" required>
            <el-input v-model="selectedPrescription.diagnosis" placeholder="请输入诊断" />
          </el-form-item>
          
          <el-form-item label="备注">
            <el-input
              v-model="selectedPrescription.notes"
              type="textarea"
              rows="2"
              placeholder="请输入备注信息"
            />
          </el-form-item>
          
          <el-form-item label="状态" v-if="!viewMode">
            <el-radio-group v-model="selectedPrescription.status">
              <el-radio label="草稿">草稿</el-radio>
              <el-radio label="已发放">已发放</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        
        <div class="form-divider"></div>
        
        <div class="prescription-drugs">
          <div class="drugs-header">
            <h3 class="form-section-title">药品明细</h3>
            <el-button 
              v-if="!viewMode" 
              type="primary" 
              size="small" 
              @click="drugSelectDialog = true"
              :icon="Plus"
            >
              添加药品
            </el-button>
          </div>
          
          <el-table :data="selectedPrescriptionDrugs" style="width: 100%" border>
            <el-table-column type="index" label="#" width="50" />
            <el-table-column prop="name" label="药品名称" min-width="150" />
            <el-table-column prop="spec" label="规格" min-width="120" />
            <el-table-column prop="usage" label="用法" min-width="80" />
            <el-table-column prop="frequency" label="频次" min-width="100" />
            <el-table-column prop="dosage" label="用量" min-width="80" />
            <el-table-column label="数量" min-width="120">
              <template #default="scope">
                <el-input-number 
                  v-model="scope.row.quantity" 
                  :min="1" 
                  :max="10" 
                  size="small"
                  :disabled="viewMode"
                />
                <span class="unit-text">{{ scope.row.unit }}</span>
              </template>
            </el-table-column>
            <el-table-column label="天数" min-width="120">
              <template #default="scope">
                <el-input-number 
                  v-model="scope.row.days" 
                  :min="1" 
                  :max="30" 
                  size="small"
                  :disabled="viewMode"
                />
                <span class="unit-text">天</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" v-if="!viewMode">
              <template #default="scope">
                <el-button 
                  size="small" 
                  type="danger" 
                  @click="removeDrug(scope.$index)" 
                  :icon="Delete"
                  circle
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="prescriptionDialog = false">{{ viewMode ? '关闭' : '取消' }}</el-button>
          <el-button type="primary" @click="submitPrescription" v-if="!viewMode">保存</el-button>
          <el-button type="success" @click="handlePrint(selectedPrescription)" v-if="viewMode && selectedPrescription.status === '已发放'">打印</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 药品选择对话框 -->
    <el-dialog
      v-model="drugSelectDialog"
      title="选择药品"
      width="60%"
    >
      <div class="drug-search">
        <el-input
          v-model="drugSearchKeyword"
          placeholder="搜索药品名称/编号/分类"
          clearable
          :prefix-icon="Search"
        />
      </div>
      
      <el-table :data="filteredDrugs" style="width: 100%" border>
        <el-table-column prop="id" label="药品编号" width="100" />
        <el-table-column prop="name" label="药品名称" min-width="150" />
        <el-table-column prop="spec" label="规格" min-width="120" />
        <el-table-column prop="category" label="分类" min-width="100" />
        <el-table-column prop="usage" label="用法" min-width="80" />
        <el-table-column prop="frequency" label="频次" min-width="100" />
        <el-table-column prop="dosage" label="用量" min-width="80" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleSelectDrug(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped>
.prescriptions-container {
  width: 100%;
}

.search-container {
  background-color: var(--background-light);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.search-form {
  width: 100%;
}

.search-buttons {
  margin-bottom: 0;
  display: flex;
  justify-content: center;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.prescription-form {
  padding: 0 20px;
}

.form-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: var(--text-primary);
  position: relative;
  padding-left: 12px;
}

.form-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

.form-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 20px 0;
}

.drugs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.drug-search {
  margin-bottom: 15px;
}

.unit-text {
  margin-left: 5px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .table-toolbar {
    flex-direction: column;
    gap: 10px;
  }
  
  .left, .right {
    display: flex;
    gap: 10px;
  }
}
</style>